<!DOCTYPE html>
<html lang="zh">
<head>
  <title>我的计划</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
  
  
    .card {
      margin-bottom: 20px;
    }
    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
    }
    .card-text {
      font-size: 0.875rem;
    }
    .card-time {
      font-size: 0.75rem;
      color: #888;
    }
    .card-status {
      font-size: 0.75rem;
      font-weight: bold;
    }
    .btns {
		position: absolute;
		bottom: 10px;
		right: 10px;
		top: 80%;
    }
	p.btns>button {
		margin-left: 5px;
	}
	
	
	
	.card-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 4;
    }
	
	/**分页**/
	.pagination {
      justify-content: center;
    }
    .page-item.disabled .page-link {
      background-color: #f8f9fa;
      color: #6c757d;
      border-color: #dee2e6;
    }
    .page-item.active .page-link {
      background-color: #007bff;
      border-color: #007bff;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Plans</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">关于</a>
        </li>
		<li class="nav-item">
          <a class="nav-link" href="action.html">添加</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            更多
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="login.html">登录</a>
            <a class="dropdown-item" href="reg.html">注册</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="feedback.html">留言&反馈</a>
          </div>
        </li>
        
      </ul>
    </div>
  </nav>
  
<div class="container mt-4">
    <div class="row">
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-success">已完成</span></p>
			<p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
			
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-danger">未开始</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-danger">已终止</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的当地的

</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-success">已完成</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
	  <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">跑步5公里，5个引体向上</h5>
            <p class="card-text">今天我要提前下班，然后跑步5公里，就绕着公园跑步，跑完了之后回家做饭，晚上出来做5个引体向上，晚上一定可以睡个好觉的，希望大家监督我哦</p>
            <p class="card-time">执行时间: 2023-06-01 10:00 AM</p>
            <p class="card-status"><span class="badge badge-warning">进行中</span></p>
            <p class="btns"><button class="btn btn-warning btn-action">修改</button><button class="btn btn-primary btn-action"><i class="fas fa-thumbs-up"></i> 点赞</button></p>
          </div>
        </div>
      </div>
    </div>
	<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
      </li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#">下一页</a>
      </li>
    </ul>
  </nav>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
  
  <script>
  
  $(function(){
	$(".btn-action").on('click',function(){
	alert('谢谢点赞')
	
	})
    $(".card-title").on('click',function () {
      location.href='detail.html'
    })
  
  })
  </script>
</body>
</html>
